<template>
  <span>{{ msg }}</span
  ><br />
  <button @click="setMsg('world!')">修改msg的值</button>
</template>

<script>

import { reactive, toRefs } from 'vue'

export default {
  setup () {
    const state = reactive({
      msg: 'hello'
    })
    const setMsg = (data) => {
      state.msg = data
    }

    return {
      ...toRefs(state),
      setMsg
    }
  }
}
</script>

<style scoped>
span {
  font-size: 28px;
}
</style>
